<template>
  <view class="page-bg">
    <!-- 企业信息头部 -->
    <view class="company-header">
      <view class="company-name">{{ detailInfo.type==0 ? detailInfo.reportedObject?.enterpriseName : detailInfo.reportedObject?.personalName }}</view>
      <!-- :class="{ 'serious': status === '严重失信', 'general': status === '一般失信' }" -->
      <view class="status-tag serious" >
        {{ getBotLabel(detailInfo.botType) }}
      </view>
    </view>

    <!-- 基本信息卡片 -->
    <view class="card">
      <view class="info-item" v-if="detailInfo.type==0 " >
        <text class="label">企业编码</text>
        <text class="value">{{ detailInfo.reportedObject.unifiedSocialCreditCode }}</text>
      </view>
      <view class="info-item" v-if="detailInfo.type==0 " >
        <text class="label">企业地址</text>
        <text class="value">{{ detailInfo.reportedObject.enterpriseAddress }}</text>
      </view>
      <view class="info-item">
        <text class="label">列入日期</text>
        <text class="value">{{ detailInfo.createTime }}</text>
      </view>
      <!-- <view class="info-item">
        <text class="label">失信类型</text>
        <text class="value">{{ getBotLabel(detailInfo.botType) }}</text>
      </view> -->
      <view class="info-item">
        <text class="label">失信金额</text>
        <text class="value">{{ detailInfo.involveAmount }}</text>
      </view>
    </view>

    <!-- 列入原因详情 -->
    <view class="card">
      <view class="card-title">列入原因详情</view>
      <view class="reason-content">
        {{ detailInfo.applyReason }}
      </view>
    </view>

    <!-- 处理意见 -->
    <view class="card">
      <view class="card-title">处理意见</view>
      <view class="basis-list">
        <view>{{ detailInfo.auditOpinion }}</view>
        <!-- <view v-for="(item, index) in basisList" :key="index" class="basis-item">
          <text class="basis-number">{{ index + 1 }}.</text>
          <text class="basis-text">{{ item }}</text>
        </view> -->
      </view>
    </view>
    <view class="card">
      <view class="card-title">证据说明</view>
      <view class="basis-list">
        <view>{{ detailInfo.evidenceReason }}</view>
        <!-- <view v-for="(item, index) in basisList" :key="index" class="basis-item">
          <text class="basis-number">{{ index + 1 }}.</text>
          <text class="basis-text">{{ item }}</text>
        </view> -->
      </view>
    </view>

    <!-- 关联证据 -->
    <view class="card">
      <view class="card-title">关联证据</view>
      <view class="evidence-container">
        <view v-if="evidenceList.length === 0" class="no-evidence">
          <u-icon name="image" color="#ccc" size="48" />
          <text class="no-evidence-text">暂无上传证据</text>
        </view>
        <view v-else class="evidence-grid">
          <view v-for="(item, index) in evidenceList" :key="index" class="evidence-item">
            <image :src="imgUrl+item" mode="aspectFill" class="evidence-image" @click="previewImage(item)" />
            <!-- <text class="evidence-caption">{{ item.caption || '证据材料' }}</text> -->
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <!-- <view class="action-btn-wrap">
      <button class="action-btn" @click="handleReport">举报该信息</button>
      <button class="action-btn" @click="handleShare">分享</button>
    </view> -->
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {imgUrl} from '@/config/index'
import {getBlackInfo,getDict} from '@/api/index'
let detailInfo = ref({})
let actionTypes = ref([])
let evidenceList = ref([])
onLoad((options)=>{
    getDict('bot_type').then(res=>{
        console.log(res);
        actionTypes.value = res.data
    })
    getBlackInfo({id: options.id}).then(res=>{
        console.log(res);
        detailInfo.value=res.data
        evidenceList.value = detailInfo.value.evidenceUrls.split(',')
        console.log(evidenceList.value);
        
    })
})
const getBotLabel=(type)=>{ 
  let index=actionTypes.value.findIndex(i=>i.dictValue==type)
  return index>-1?actionTypes.value[index].dictLabel:''
}

// 预览图片
const previewImage = (url) => {
  uni.previewImage({
    urls: [imgUrl+url]
  })
}

// 举报该信息
const handleReport = () => {
  uni.navigateTo({
    url: '/pages/blacklist/report.vue'
  })
}

// 分享
const handleShare = () => {
  uni.share({
    title: `${props.companyName}黑名单详情`,
    desc: `查看${props.companyName}被列入黑名单的原因及处理依据`,
    imageUrl: 'https://example.com/share-image.jpg',
    success: () => {
      uni.showToast({ title: '分享成功' })
    },
    fail: () => {
      uni.showToast({ title: '分享失败', icon: 'none' })
    }
  })
}
</script>

<style scoped>
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

.company-header {
  padding: 32rpx 24rpx;
  text-align: center;
}

.company-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 16rpx;
}

.status-tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.serious {
  background-color: #ffeaea;
  color: #fa5151;
}

.general {
  background-color: #fff9e6;
  color: #f5a623;
}

.card {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 28rpx 24rpx 18rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  box-sizing: border-box;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.label {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
}

.value {
  font-size: 26rpx;
  color: #333;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
  display: flex;
  align-items: center;
}

.reason-content {
  background: #f7f8fa;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 26rpx;
  color: #4a4a4a;
  line-height: 1.6;
}

.basis-list {
  margin-top: 12rpx;
}

.basis-item {
  display: flex;
  margin-bottom: 16rpx;
}

.basis-number {
  font-size: 28rpx;
  color: #3a7afe;
  margin-right: 12rpx;
}

.basis-text {
  font-size: 26rpx;
  color: #4a4a4a;
}

.evidence-container {
  margin-top: 12rpx;
}

.no-evidence {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  text-align: center;
}

.no-evidence-text {
  font-size: 26rpx;
  color: #888;
  margin-top: 12rpx;
}

.evidence-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.evidence-item {
  flex: 1 1 calc(33.33% - 16rpx);
  max-width: calc(33.33% - 16rpx);
}

.evidence-image {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.evidence-caption {
  font-size: 22rpx;
  color: #666;
  text-align: center;
  margin-top: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-btn-wrap {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 999;
}

.action-btn {
  flex: 1;
  background: #2156f3;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  padding: 20rpx 0;
}
</style>